<!DOCTYPE html>
<html>
<head>
    <title>注册 | 米塔云平台管理系统</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <link href="customize/css/login.css" rel="stylesheet"/>
    <style>
        .login-content {
            height: 597px;
            background-image: url(customize/images/regist-content-bg.png);
            top: 23.5%;
        }

        .login-input {
            margin: 0;
            border: none;
        }
        /*弱提示*/
        .modal-hint{ position: fixed; top: 48%; left: 50%; background: rgba(0, 0, 0, 0.7); color: #fff; border-radius: 5px; font-size: 24px; z-index:2000; padding: 12px 20px; }
        /*强提示*/
        .modal-hint.strong{ top: 0; left: 0; border-radius: 0; font-size: 24px; z-index:2001; padding: 0; padding-top: 20%; width: 100%; height: 100%; text-align: center; }
        /*旋转动画*/
        .rotate{ animation: rotate 2s linear infinite;}
        @keyframes rotate{ 0%{ transform:rotate(0deg);} 50%{ transform:rotate(180deg);} 100%{ transform:rotate(360deg);} }
    </style>
</head>
<body>
<div id="lottie"></div>
<form class="login-content" id="registerForm">
    <div class="input-wrapper form-group">
        <input class="login-input form-control" type="text" name="username" id="username" placeholder="手机号"  maxlength="11">
    </div>
    <div class="input-wrapper d-flex form-group">
        <input class="login-input form-control" type="text" name="captcha" id="captcha" placeholder="短信验证码">
        <a href="#" class="login-btn" style="margin-left: 5px;margin-bottom: -13px;"
           onclick="sendMsg(this,$('#username').val(),interval)">发送验证码</a>
    </div>
    <div class="input-wrapper form-group">
        <input class="login-input form-control" type="text" name="displayName" id="displayName" placeholder="用户名" maxlength="16">
    </div>
    <div class="input-wrapper form-group">
        <input class="login-input form-control" type="password" name="password" id="password" placeholder="密码">
    </div>
    <div class="input-wrapper form-group">
        <input class="login-input form-control" type="password" name="password2" id="password2" placeholder="确认密码">
    </div>
    <div class="input-wrapper form-group">
        <input class="login-input form-control" type="text" name="desc" id="desc" placeholder="备注信息">
    </div>
    <div class="button-wrapper" style="margin-bottom: 6px;">
        <a href="#" class="login-btn" onclick="register()"><img
                src="customize/images/regist-btn-text.png" alt=""></a>
    </div>
    <div class="group-wrapper" style="padding: 0 10px; text-align: right;">
        <a href="index.html">已有账号？返回登录&gt;&gt;</a>
    </div>
</form>
</body>
<script src="plugins/jquery-3.4.1.min.js"></script>
<script src="plugins/alert.js"></script>
<script src="customize/js/customModalV2.js"></script>
<script src="customize/js/loginAnimation.js"></script>
<script src="customize/js/CommonUtils.js"></script>
<script src="customize/js/common.js"></script>
<script>
    var interval;

    $(function () {
        itemsResize();
    });

    function register() {
        let regular = /^((\+|00)86)?((134\d{4})|((13[0-3|5-9]|14[1|5-9]|15[0-9]|16[2|5|6|7]|17[0-8]|18[0-9]|19[0-2|5-9])\d{8}))$/;
        if(!regular.test($('#username').val())){
            showModalHint("none","请输入正确的手机号");
            return;
        }
        if(!/^\d{6}$/.test($('#captcha').val())){
            showModalHint("none","请输入正确的验证码");
            return;
        }
        let length = /^.{1,16}$/;
        if(!length.test($('#displayName').val())){
            showModalHint("none","用户名限制1-16字符");
            return;
        }
        if(!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test($('#password').val())){
            showModalHint("none","密码至少包含：数字和英文，长度6-16。");
            return;
        }
        if ($('#password').val() !== $('#password2').val()) {
            showModalHint('none', '两次密码输入不一致');
            return;
        }
        getJson('/sys/register', $('#registerForm').serialize(), 'POST', function (data) {
            if (data['code'] == 200) {
                myAlert('提示', '注册成功', function () {
                    top.location.href = 'index.html';
                });
            } else {
                myAlert('提示', data['message']);
            }
        });
    }

    /* 监测窗口大小改变 */
    var resizeWaiter = false;
    $(window).resize(function () {
        if (!resizeWaiter) {
            resizeWaiter = true;
            setTimeout(function () {
                itemsResize();
                resizeWaiter = false;
            }, 500);
        }
    });

    /* 根据窗口大小缩放、调整位置 */
    function itemsResize() {
        var content_width = $('.login-content').width();
        var body_width = document.documentElement.clientWidth;//获取页面可见宽度
        var body_height = document.documentElement.clientHeight;//获取页面可见高度
        var scale = body_width / 1920;
        var oright_height = 1080 * scale;//缩放后的容器实际高度
        var offset_y = (body_height - oright_height) / 2; //背景在非全屏下的纵向偏移修正
        $('#lottie').css({
            marginTop: offset_y
        })
        $('.login-content').css({
            transform: 'scale(' + scale + ')',
            transformOrigin: 'left top 0px',
            marginTop: offset_y * 0.55 //输入块在非全屏下的纵向偏移修正
        });
    }
</script>
</html>
